<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic Layout - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="../css/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../css/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../css/themes/color.css">
	<script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>

</head>
<body>

    <div class="easyui-layout" data-options="fit:true">
            <!-- 左侧布局 -->
                    <div data-options="region:'west',split:true" title="新闻分类" style="width:200px;">
                            <div id="treeButtonGroup" class="easyui-panel" style="padding:5px;widows: 100px;" >
                                    <!-- 默认选中 -->
                                    <a href="#" class="easyui-linkbutton" data-type="1" data-url="news" data-name="title" data-options="toggle:true,group:'g1',selected:true">新闻评论</a>
                                    <a href="#" class="easyui-linkbutton" data-type="2" data-url="product" data-name="goodsname" data-options="toggle:true,group:'g1'">产品评论</a>
                                </div>
                        <div id="tb1" style="padding:2px 5px;">
                            <input id="name1" style="width:100%;">
                            <a href="#" id="searchData1" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
                        </div>
                        <table id="dg1"></table>
                    </div>

            <!-- 右侧布局 -->
            <div data-options="region:'center',title:'评论内容',iconCls:'icon-ok'">
                    <table id="dg"></table>
                    <div id="tb" style="padding:2px 5px;">
                        <input id="name" label="用户名称:" style="width:100%;"  type="hidden">
                        <a href="#" id="searchData" class="easyui-linkbutton" iconCls="icon-search">搜索</a>
                        <a href="#" id="addData" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加</a>
                        <a href="#" id="removesData" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">批量删除</a>
                    </div>

                    <div id="dlg" class="easyui-dialog" title="增加评论" data-options="iconCls:'icon-save',closed: true" style="width:400px;height:400px;padding:10px">

                        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
                                <input  id="cid" name="bdid" style="width:100%"  type="hidden">
                                <input  id="cty" name="bdtype" style="width:100%"  type="hidden">
                                <input  id="cbsid" name="_id" style="width:100%"  type="hidden">
                            <div style="margin-bottom:20px">
                                <input class="easyui-textbox" name="pluser" style="width:100%" data-options="label:'评论用户:',required:true,missingMessage:'请填写评论用户'">
                            </div>
                            <div style="margin-bottom:20px">
                                    <select class="easyui-combobox" name="pllvl" style="width:100%" data-options="label:'评论等级:',required:true,missingMessage:'请选择等级',editable:false,panelHeight:'auto'"><option value="好评">好评</option><option value="中评">中评</option><option value="差评">差评</option></select>
                            </div>
                            <div style="margin-bottom:20px">
                                <input class="easyui-textbox"  name="plcontent" style="width:100%" data-options="label:'评论内容:',required:true,missingMessage:'请填写内容',height:66,multiline:true">
                            </div>
                            <div style="margin-bottom:20px">
                                <!-- <input class="easyui-textbox" name="date" style="width:100%" data-options="label:'发布时间:',required:true"> -->
                                <input class="easyui-datetimebox" name="pldate" style="width:100%" data-options="label:'评论时间:',required:true,missingMessage:'请选择时间',showSeconds:false" >
                            </div>
                        </form>
                        <div style="text-align:center;padding:5px 0">
                            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
                            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">取消</a>
                        </div>
                    </div>
            </div>
        </div>

        <div id="dlg2" class="easyui-dialog" title="新闻详情" data-options="iconCls:'icon-save',closed: true" style="width:400px;height:400px;padding:10px">
       <p id="newstext"></p>
        </div>
</body>
</html>

<script>
//全局变量
var urlstr = 'news';
var namestr = 'title';
var typestr = '1';
var dyid = '';
//左侧
showleft();
//按钮点击  改变全局变量
$("#treeButtonGroup a").click(function(){
    typestr = $(this).attr('data-type');
    urlstr= $(this).attr('data-url');
    namestr = $(this).attr('data-name');
    //console.log(typestr,urlstr,namestr)
    showleft();
    //console.log(`${window.parent.globalURL}${urlstr}/list`);
    //treeList(type);
});
//渲染的函数
function showleft(){
    $('#dg1').datagrid({
    url:`${window.parent.globalURL}${urlstr}/list`,
    fit:'true',
    border:false,
    toolbar:'#tb1',
    singleSelect:true,
    onSelect:function(rowIndex, rowData){
       //选中一个时候 讲这条信息的id存储起来
        dyid= rowData._id;
        //console.log(dyid);
        showrright(dyid,typestr);
    },
    columns:[[
        {field:'ck',checkbox:true},
        {field:namestr,title:'名称',width:170},
    ]]
});
}
//左侧搜索功能
$("#searchData1").click(function(){
    if(namestr == "title"){
        $('#dg1').datagrid({
            queryParams: {
                name: $("#name1").val()
            }
        });
    } else{
        $('#dg1').datagrid({
            queryParams: {
                goodsname: $("#name1").val()
            }
        })
    }
});

//右侧功能
//添加新闻-----------------------------------------
function showrright(dyid,typestr){
    $('#dg').datagrid({
    url:`${window.parent.globalURL}comment/list`,
    fit:'true',
    border:false,
    pagination:true,
    toolbar:'#tb',
    queryParams: {
            pltype:typestr,
            plid:dyid ,
    },
    onLoadSuccess:function(data){$("a[name='a1']").linkbutton({plain:true})},
    columns:[[
        {field:'ck',checkbox:true},
        {field:'pluser',title:'用户名称',width:100},
        {field:'pllvl',title:'评论等级',width:100},
        {field:'plcontent',title:'评论内容',width:200},
        {field:'pldate',title:'评论时间',width:190,formatter: function(value, row, index) {
            return `<span>${renderTime(row.pldate)}</span>`;
            }
        },
        {field:'_id',title:'操作', width:150,
            formatter: function(value,row,index){
                return `<a href="javascript:void(0)" name="a1" class="c3"  onclick="updateData('${row._id}')">修改</a> <a href="javascript:void(0)" name="a1" class="c7" onclick="deleteData('${row._id}')">删除</a>`
            }
		}
    ]]
});
}
$("#addData").click(function(){
    if($('#dg1').datagrid('getSelected')){
        $('#ff').form('clear');
        $('#cid').val(dyid);
        $('#cty').val(typestr);
        $('#dlg').dialog('open');
        //$('#addid').val(node);
    }else{
        $.messager.alert('警告','请选择左侧内容');
    }

})

$("#removesData").click(function(){
    deleteDatas();
})
 function submitForm(){
    $('#ff').form('submit',{
        onSubmit:function(){
           if($(this).form('enableValidation').form('validate')){
                // 将当前页面的表单信息进行获取，然后进行ajax请求
                var formData = $("#ff").serializeJSON();
                    // add
                    //delete formData._id;
                    if(formData._id.length > 0){
                    // update
                    $.ajax({
                        url:`${window.parent.globalURL}comment/${formData._id}`,
                        type:'put',
                        data: formData
                    }).done(function(res){
                        $('#dlg').dialog('close');
                        $('#dg').datagrid('reload');
                        $('#ff').form('clear');
                    })
                }else{
                    // add
                    delete formData._id;
                    $.ajax({
                        url:`${window.parent.globalURL}comment`,
                        type:'post',
                        data: formData
                    }).done(function(res){
                        $('#dlg').dialog('close');
                        $('#dg').datagrid('reload');
                        $('#ff').form('clear');
                    })
                }
           }
           return false; // 阻止默认事件
            // 表单验证
        }
    });

}


//修改函数
function updateData(id){
    $('#ff').form('clear');
    $.ajax({
        url:`${window.parent.globalURL}comment/${id}`,
        type:'put'
    }).done(function(res){
        $('#ff').form('load',res);
        $('#dlg').dialog('open');
    })
}


function clearForm(){
    $('#ff').form('clear');
}

function renderTime(date) {
        var dateee = new Date(date).toJSON();
        return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
    }


// $('#dg').datagrid({
//     url:`${window.parent.globalURL}comment/list`,
//     fit:'true',
//     border:false,
//     pagination:true,
//     toolbar:'#tb',
//     onLoadSuccess:function(data){$("a[name='a1']").linkbutton({plain:true})},
//     columns:[[
//         {field:'ck',checkbox:true},
//         {field:'pluser',title:'用户名称',width:100},
//         {field:'pllvl',title:'评论等级',width:100},
//         {field:'plcontent',title:'评论内容',width:200},
//         {field:'pldate',title:'评论时间',width:190,formatter: function(value, row, index) {
//             return `<span>${renderTime(row.date)}</span>`;
//             }
//         },
//         {field:'_id',title:'操作', width:150,
//             formatter: function(value,row,index){
//                 return `<a href="javascript:void(0)" name="a1" class="c3"  onclick="updateData('${row._id}')">修改</a> <a href="javascript:void(0)" name="a1" class="c7" onclick="deleteData('${row._id}')">删除</a>`
//             }
// 		}
//     ]]
// });

function deleteData(id){
    $.messager.confirm('确认对话框', '你确认删除?', function(r){
        if (r){
            $.ajax({
                url:`${window.parent.globalURL}comment/${id}`,
                type:'delete'
            }).done(function(res){
                $("#dg").datagrid('reload');
            })
        }
    });

}

//删除多个
function deleteDatas(){
  var rows = $('#dg').datagrid('getSelections');
  var ids = [];
  for(var i=0;i<rows.length;i++){
    ids.push(rows[i]._id);
  }

  $.messager.confirm('确认对话框', '你确认删除?', function(r){
        if (r){
            $.ajax({
                url:`${window.parent.globalURL}comment/removes`,
                type:'post',
                data:{
                    ids: ids.toString()
                }
            }).done(function(res){
                $("#dg").datagrid('reload');
            })
        }
    });

}

$("#searchData").click(function(){
    $('#dg').datagrid({
        queryParams: {
            name: $("#name").val()
        }
    });
})



</script>